<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理系统</title>
	<!-- 引入bootstrap css -->
	<link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.css" />
	<script src="jquery-3.7.1.js"></script>
	<script src="bootstrap-4.6.2-dist/js/bootstrap.bundle.js"></script>
</head>
<body>
	<div class="container">
		<h1 class="h1 text-center mt-4">学生信息展示</h1>
		<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h5 class="modal-title" id="exampleModalLabel">新增学生信息</h5>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
		      </div>
			  <form id="addstudent">
		      <div class="modal-body">
		          <div class="form-group">
		            <label for="xzsno" class="col-form-label">学号:</label>
		            <input type="text" class="form-control focus" id="xzsno" required >
		          </div>
		          <div class="form-group">
		            <label for="xzsname" class="col-form-label">姓名:</label>
		            <input type="text" class="form-control" id="xzsname" required>
		          </div>
				  <div class="form-group">
				    <label for="xzsgrade" class="col-form-label">班级:</label>
				    <input type="text" class="form-control" id="xzsgrade" required>
				  </div>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="closeMsg">关闭</button>
		        <button type="submit" class="btn btn-primary">提交</button>
		      </div>
			  </form>
		    </div>
		  </div>
		</div>
		<form id="querylike">
		  <div class="form-row align-items-center">
		    <div class="col-3">
		      <label class="sr-only" for="sno">学号</label>
		      <input type="text" class="form-control mb-2" id="sno" placeholder="学号">
		    </div>
		    <div class="col-3">
		      <label class="sr-only" for="name">姓名</label>
		      <input type="text" class="form-control mb-2" id="name" placeholder="姓名">
		    </div>
		    <div class="col-3">
		      <label class="sr-only" for="grade">班级</label>
		      <input type="text" class="form-control mb-2" id="grade" placeholder="班级">
		    </div>
		    <div class="col-auto">
		      <button type="submit" class="btn btn-primary mb-2">查询</button>
		    </div>
			<div class="col-auto">
				<button type="button" class="btn btn-primary mb-2" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">新增学生信息</button>
			</div>
		  </div>
		</form>
		<table class="table">
		  <thead>
		    <tr>
		      <th scope="col">序号</th>
		      <th scope="col">学号</th>
		      <th scope="col">姓名</th>
		      <th scope="col">班级</th>
			  <th scope="col">操作</th>
		    </tr>
		  </thead>
		  <tbody>
		    <tr>
		      <th scope="row">1</th>
		      <td>Mark</td>
		      <td>Otto</td>
		      <td>@mdo</td>
		    </tr>
		    <tr>
		      <th scope="row">2</th>
		      <td>Jacob</td>
		      <td>Thornton</td>
		      <td>@fat</td>
		    </tr>
		    <tr>
		      <th scope="row">3</th>
		      <td>Larry</td>
		      <td>the Bird</td>
		      <td>@twitter</td>
		    </tr>
		  </tbody>
		</table>
	</div>
	<script>
		function queryall(){
			$.ajax({
				url:"/queryall",
				method:"POST",
				data:{},
				dataType:"json",
				success:function(response){
						console.log(response);
						let index = 1;
						$("tbody").empty();
						for (let i = 0; i < response.length; i++) {
							let s = "<tr>";
							s+="<th scope='row'>"+index+++"</th>";
							s+="<td>"+response[i]["sno"]+"</td>";
							s+="<td>"+response[i]["name"]+"</td>";
							s+="<td>"+response[i]["grade"]+"</td>";
							//增加删除按钮
							s+="<td><button class='btn btn-danger btn-sm delete' sno='"+response[i]["sno"]+"'>删除</button></td>"
							s+="</tr>";
							//将元素插入tbody中
							$("tbody").append(s);
							//mvc model-->数据库--studentDAO v-->view--前端界面
							//controller-->控制器-->servlet
							
						}
						//在所有的删除按钮上注册事件
						$(".delete").click(function(e){
							console.log("点击了删除按钮")
							//点删除按钮的时候获取学号信息
							let sno = e.target.getAttribute("sno")
							console.log(sno)
							deleteStudent(sno)
						})
				},
				error:function(xhr,textStatus,errorThrown){
					console.log(textStatus);
				}
			})
		}
		$(document).ready(queryall())
		function querylike(){
			$.ajax({
				url:"/querylike",
				method:"post",
				data:{
					"sno":document.querySelector("#sno").value,
					"name":document.querySelector("#name").value,
					"grade":document.querySelector("#grade").value
				},
				dataType:"json",
				success:function(response){
					//成功返回的数据
					console.log(response)
					let index = 1;
					$("tbody").empty();
					for (let i = 0; i < response.length; i++) {
						let s = "<tr>";
						s+="<th scope='row'>"+index+++"</th>";
						s+="<td>"+response[i]["sno"]+"</td>";
						s+="<td>"+response[i]["name"]+"</td>";
						s+="<td>"+response[i]["grade"]+"</td>";
						//增加删除按钮
						s+="<td><button class='btn btn-danger btn-sm delete' sno='"+response[i]["sno"]+"'>删除</button></td>"
						s+="</tr>";
						//将元素插入tbody中
						$("tbody").append(s);
						//mvc model-->数据库--studentDAO v-->view--前端界面
						//controller-->控制器-->servlet
					}
					//在所有的删除按钮上注册事件
					$(".delete").click(function(e){
						console.log("点击了删除按钮")
						//点删除按钮的时候获取学号信息
						let sno = e.target.getAttribute("sno")
						console.log(sno)
						deleteStudent(sno)
					})
				},
				error:function(xhr,textStatus,errorThrown){
					console.log(textStatus);
				}
			})
		}
		//form表单的提交动作
		document.querySelector("#querylike").onsubmit = function(e){
			e.preventDefault();
			querylike();
		}
		document.querySelector("#addstudent").onsubmit = function(e){
			e.preventDefault();
			let sno = $("#xzsno").val();
			let sname = $("#xzsname").val();
			let sgrade = $("#xzsgrade").val();
			addstudent(sno,sname,sgrade);
		}
		function addstudent(sno,sname,sgrade){
			$.ajax({
				url:"/addstudent",
				method:"post",
				data:{
					"sno":sno,
					"sname":sname,
					"sgrade":sgrade
				},
				dataType:"json",
				success:function(response){
					//成功返回的数据
					if(response["code"]==0){
						alert("新增学生信息失败");
					}else{
						alert("新增了"+response["code"]+"条学生信息")
						$("#closeMsg").click()
						queryall()
					}
					
					console.log(response)
				},
				error:function(xhr,textStatus,errorThrown){
					console.log(textStatus);
				}
			})
		}
		//定义一个删除函数
		function deleteStudent(sno){
			$.ajax({
				url:"/deletestudent",
				method:"post",
				data:{
					"sno":sno,
				},
				dataType:"json",
				success:function(response){
					//成功返回的数据
					if(response["code"]==0){
						alert("删除学生信息失败");
					}else{
						alert("删除了"+response["code"]+"条学生信息")
						queryall()
					}
					
					console.log(response)
				},
				error:function(xhr,textStatus,errorThrown){
					console.log(textStatus);
				}
			})
		}
	</script>
</body>
</html>